<template>
  <div class="box" shadow="never">
    <el-form :model="article" label-width="120px" :rules="rules" ref="ruleForm">
      <el-form-item></el-form-item>

      <el-form-item label="文章名称：" prop="title">
        <el-input
          v-model="article.title"
          style="width: 400px"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="文章作者：" prop="author">
        <el-input
          v-model="article.author"
          style="width: 400px"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="文章类型：" prop="type">
        <el-select v-model="article.type" placeholder="请选择文章类型">
          <el-option label="公共健康" value="公共健康"></el-option>
          <el-option label="职业健康" value="职业健康"></el-option>
          <el-option label="老年健康" value="老年健康"></el-option>
          <el-option label="其他" value="其他"></el-option>
        </el-select>
        <el-button
          type="success"
          @click="addType"
          icon="el-icon-plus"
        ></el-button>
      </el-form-item>

      <el-form-item label="文章标签：" >
        <el-radio-group v-model="article.label">
          <el-radio label="公共健康">公共健康</el-radio>
          <el-radio label="职业健康">职业健康</el-radio>
          <el-radio label="老年健康">老年健康</el-radio>
          <el-radio label="其他">其他</el-radio>
  </el-radio-group>
      </el-form-item>

      <el-form-item label="开课时间：" prop="createTime">
        <el-date-picker
          v-model="article.createTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="更新时间：" prop="updateTime">
        <el-date-picker
          v-model="article.updateTime"
          type="datetime"
          placeholder="选择日期时间"
          value-format="timestamp"
        >
        </el-date-picker>
      </el-form-item>

      <!-- 上传图片 -->
      <el-form-item label="文章图片：">
        <el-upload
          class="avatar-uploader"
          action="http://42.194.159.131:8080/pic/imgUpload?path=knowledge"
          :headers="headers"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="article.image" :src="article.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <!-- ------------------------------ -->

      <el-form-item label="概括：" prop="introduction">
        <el-input
          v-model="article.introduction"
          style="width: 400px"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="来源：" prop="source">
        <el-input
          v-model="article.source"
          style="width: 400px"
          placeholder="请输入内容"
        />
      </el-form-item>

      <el-form-item label="内容：" prop="context">
        <el-input
          :autoSize="true"
          style="width: 400px"
          v-model="article.context"
          type="textarea"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>

      <el-form-item label-width="0px" style="margin-bottom: 30px;margin-left:49px">
                  <Tinymce ref="editor" v-model="article.content" :height="500" :width = "600"/>
               </el-form-item>

      <el-form-item>

        <el-button type="primary" @click="onSubmit"  class="add">添加</el-button>

      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogFormVisible">
      <el-form style="width: 80%" :model="article" >
        <el-form-item label="文章类型" label-width="100px">
          <el-input autocomplete="off" v-model="article.type"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import Tinymce from '@/components/Tinymce'
import addhealarticle from "@/api/healthyarticle";
export default {
   components: {
    Tinymce,
   },
  data() {

    return {
      radio: 4,
      dialogFormVisible: false, //对话框（查看）
      // -------------------------------------------日历
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      article: {
        title: "",
        image: "",
        author: "",
        type: "",
        label: "",
        introduction: "",
        source: "",

        collectNum: 3,
        status: 0,
        createTime: "",
        updateTime: "",
        
      },
      headers: {
        Authorization: getToken(),
      },
      rules: {
        title: [
          { required: true, message: "请输入文章名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        author: [
          { required: true, message: "请输入作者", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请输入类型", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        label: [
          { required: true, message: "请输入标签", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        introduction: [
          { required: true, message: "请概括", trigger: "blur" },
          {
            min: 2,
            max: 100,
            message: "长度在 2 到 100 个字符",
            trigger: "blur",
          },
        ],
        source: [
          { required: true, message: "请输入来源", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        context: [
          { required: true, message: "请输入内容", trigger: "blur" },
          {
            min: 2,
            max: 1000,
            message: "长度在 2 到 1000 个字符",
            trigger: "blur",
          },
        ],
        createTime: [
          {
            type: "date",
            required: true,
            message: "请选择开课日期、时间",
            trigger: "blur",
          },
        ],
        updateTime: [
          {
            type: "date",
            required: true,
            message: "请选择更新日期、时间",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    onSubmit() {
      //获取from结点，验证字段
      this.$refs.ruleForm.validate(async (success) => {
        //如果全部字段符合条件
        if (success) {
          var vm = this;
          addhealarticle
            .adarticle(vm.article)
            .then(function (resp) {
              vm.$message({
                message: "添加成功!",
                type: "success",
              });
              vm.$router.go(-1);
            })
            .catch(function (error) {
              vm.$message.error("添加失败");
            });
        } else {
          return false;
        }
      });
    },
    //文章类型
    addType() {
      console.log("aaaaaaaa");
      this.dialogFormVisible = true;
    },
    //上传图片相关回调
    handleAvatarSuccess(res, file) {
      this.article.image = res.data.picUrl;
      console.log("上传图片成功", res);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      console.log("beforeAvatarUpload", file);
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  // -------------------------------------------------
};
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}

.box {
  margin-left: 200px;
  height: 1600px;
  width: 700px;
  border: solid rgb(187, 186, 187);
  display: flex;
  position: relative;
}

.avatar-uploader .el-upload {
  border: 3px dashed #decfcf;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.add{
// display:flex;
// align-items:center;
// justify-content:center

  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  // display: table-cell;
  // text-align: center;
  // width: 500px;
  // height: 300px;

}
</style>

